<template>
    <a-card :bordered="false" :class="{'abcdefg':true}">
        <div class="no-print" style="text-align: right">
            <a-button v-print="'#printContent'" ghost type="primary">打印</a-button>
        </div>
        <section ref="print" id="printContent" class="abcdefg">
            <div style="text-align: center">
                <p style="font-size: 24px;font-weight: 800">打印测试表单</p>
            </div>
            <!--签字-->
            <a-col :md="24" :sm="24">
                <div class="sign" style="text-align: left;height: inherit">
                    <a-col :span="24">
          <span>
            打印人员:
          </span>
                        <a-input style="width: 30%" v-model="printer"/>
                        <span style="margin-left: 12.5%">打印日期:</span>
                        <a-input style="width: 30%" v-model="printTime"/>
                    </a-col>
                    <a-col :span="24">
                    </a-col>
                    <a-col :span="24" style="margin-top: 20px">
                        <span>打印内容:</span>
                        <a-input style="width: 80%" v-model="printContent"/>
                    </a-col>
                    <a-col :span="24" style="margin-top: 20px">
                        <span>打印目的:</span>
                        <a-input style="width: 80%" v-model="printReason"/>
                    </a-col>
                    <a-col style="margin-top: 20px" :span="24">
                        <span>打印图片:</span>
                        <br/>
                        <a-upload
                                action="/jsonplaceholder.typicode.com/posts/"
                                listType="picture-card"
                                :fileList="fileList"
                                @preview="handlePreview"
                                @change="handleChange">
                            <div v-if="fileList.length < 3">
                                <a-icon type="plus" />
                                <div class="ant-upload-text">Upload</div>
                            </div>
                        </a-upload>
                        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                            <img alt="example" style="width: 100%" :src="previewImage" />
                        </a-modal>
                    </a-col>
                </div>
            </a-col>
        </section>
    </a-card>
    <!--</page-layout>-->
</template>
<script>
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ATextarea from 'ant-design-vue/es/input/TextArea'

export default {
  components: {
    ATextarea,
    ARow,
    ACol
  },
  name: 'Printgzsld',
  props: {
    reBizCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      columns: [{
      }
      ],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 2 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      printer: '张三',
      printTime: '2019-02-01 12:00:00',
      printContent: '打印内容就是,做一个打印测试',
      printReason: '做一个打印测试',
      previewVisible: false,
      previewImage: '',
      fileList: [{
        uid: '-1',
        name: 'xxx.png',
        status: 'done',
        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
      },
      {
        uid: '-2',
        name: 'pic1.png',
        status: 'done',
        url: 'https://www.gizbot.com/img/2016/11/whatsapp-error-lead-image-08-1478607387.jpg'
      }
      ],
      url: {
        loadApplicant: "/sps/register/loadApplicants",
        loadRegisterFiles: "/sps/register/getRegisterFilesConfig"
      }
    }
  },
  created() {
    this.getDate();
  },
  methods: {
    loadData() {

    },
    getDate() {
      // 当前时间
    },
    handleCancel () {
      this.previewVisible = false
    },
    handlePreview (file) {
      this.previewImage = file.url || file.thumbUrl
      this.previewVisible = true
    },
    handleChange ({ fileList }) {
      this.fileList = fileList
    }
  }
}
</script>
<style scoped>
    /*update_begin author:scott date:20191203 for:打印机打印的字体模糊问题 */
    * {
        color: #000000!important;
        -webkit-tap-highlight-color: #000000!important;
    }
    /*update_end author:scott date:20191203 for:打印机打印的字体模糊问题 */

    .abcdefg .ant-card-body{
        margin-left: 0%;
        margin-right: 0%;
        margin-bottom: 1%;
        border:0px solid black;
        min-width: 800px;
        color:#000000!important;
    }
    .explain{
        text-align: left;
        margin-left: 50px;
        color:#000000!important;
    }
    .explain .ant-input,.sign .ant-input{
        font-weight:bolder;
        text-align:center;
        border-left-width:0px!important;
        border-top-width:0px!important;
        border-right-width:0px!important;
    }
    .explain div{
        margin-bottom: 10px;
    }
    /* you can make up upload button and sample style by using stylesheets */
    .ant-upload-select-picture-card i {
        font-size: 32px;
        color: #999;
    }

    .ant-upload-select-picture-card .ant-upload-text {
        margin-top: 8px;
        color: #666;
    }
</style>
